import { Button, View as OriginView } from '@ray-js/ray';
import React, { useState } from 'react';

export const View = props => {
  const [active, setActive] = useState(false);

  return (
    <OriginView
      {...props}
      onTouchStart={() => {
        if (props?.onClick) {
          setActive(true);
        }
      }}
      onTouchEnd={() => {
        if (props?.onClick) {
          setActive(false);
        }
      }}
      style={{
        ...(props?.style ?? {}),
        opacity: active ? 0.5 : 1,
      }}
    />
  );
};
